//1.tasks数据结构
// let tasks = [
//     { id: 1, text: "睡觉", completed: false },
//     { id: 2, text: "吃饭", completed: true },
//     { id: 3, text: "打燕云", completed: false },
// ]
let tasks = getLoalStorage()||[];
console.log(tasks);

//2.获取元素
let addBtn = document.querySelector(".addtask .addbtn");
let inputText = document.querySelector(".addtask input");
let ul = document.querySelector(".tasklist ul");
let category = document.querySelector(".category");
let inputSearch = document.querySelector('.search input');

//. 事件添加
//window onload 事件
window.addEventListener('load', function () {
    //渲染
    renderTasks(tasks);
})
//添加按钮
addBtn.addEventListener('click', function () {
    if (inputText.value.trim() != '') {
        //数据添加
        //1.产生数据-task对象
        //数组最后一个值+1
        let id;
        if(tasks.length){
            id = tasks[tasks.length - 1].id + 1;
        }else{
            id=1;
        }
        const task = {
            id: id, text: inputText.value, completed: false
        };
        //2.把对象放到task数组中
        tasks.push(task);
        saveToLoalStorage();
        // //3.显示
        // console.log(tasks);
        //渲染
        renderTasks(tasks)
    } else {
        window.alert('请输入添加的任务信息')
    }

});


//4.函数
function renderTasks(tasks) {
    //清空现有的ul中的html
    ul.innerHTML = '';
    tasks.forEach(task => {
        //先创建一个元素
        const li = document.createElement('li');
        //修改元素的html内容
        li.innerHTML = `
                    <div class="left">
                        <input type="checkbox" data-id="${task.id}" ${task.completed ? 'checked' : ''}>
                        <span class="${task.completed ? 'line' : ''}">${task.text}</span>
                    </div>
                    <div class="btn-group">
                        <button class="editBtn" data-id="${task.id}">编辑</button>
                        <button class="delBtn" data-id="${task.id}">删除</button>
                    </div>
               `;
        //给每个按钮添加点击事件
        //找删除按钮
        // const delBtn = li.querySelector(".delBtn");
        //绑定删除按钮
        // delBtn.onclick = removeTask;
        // delBtn.addEventListener('click',function(e){
        //     removeTask(task.id,e);
        // });

        //元素放到ul中
        ul.appendChild(li);

    });
    updateCount();
}



//category添加事件-filter 判断是那个按钮--事件委托
category.addEventListener('click', function (e) {
    if (e.target.tagName == "BUTTON") {
        //获取自定义属性的值
        const filter = e.target.dataset.filter;
        //渲染
        renderTasks(filterTasks(tasks, filter))
    }
})

//搜索框enter后修改数据
inputSearch.addEventListener('keydown', function (e) {
    //当按下回车建
    if (e.key == 'Enter') {
        //判断搜索框是否为空
        if (inputSearch.value.trim() != "") {

            const result = tasks.filter(item => item.text.includes(inputSearch.value))
            renderTasks(result);

            //拿搜索框中的值和数组中的每个元素的text值进行搜索 得到一个数组

        } else {
            window.alert('请在搜索框中输入搜索信息')
        }
    }
})

//使用事件委托处理删除操作
ul.addEventListener('click', function (e) {
    removeTask(e);
    changeStatus(e);
    editTask(e);
})

//分类过滤函数
//input:
/*
功能:分类过滤函数
输入：tasks-所有任务，filter[all,completed,uncompleted]
输出：过滤后的任务
*/
function filterTasks(tasks, filter) {
    switch (filter) {
        case "completed":
            return tasks.filter(task => task.completed)
        case "uncompleted":
            return tasks.filter(task => !task.completed)
        default:
            return tasks;

    }
}

//删除函数
function removeTask(e) {
    let li;
    if (e.target.nodeName == "BUTTON" && e.target.className == "delBtn") {
        //获取task的id
        const id = e.target.dataset.id;
        tasks = tasks.filter(task => task.id != id);
        saveToLoalStorage();

        //获取包含删除按钮的li元素
        li = e.target.parentElement.parentElement;
        ul.removeChild(li);


        updateCount();
    }
}

//改变task的完成属性值
function changeStatus(e) {
    let li;
    if (e.target.nodeName == "INPUT") {
        //获取task的id
        const id = e.target.dataset.id;
        console.log(id);

        const task = tasks.find(task => task.id == id);
        console.log(task);
        console.log(e.target.checked);
        task.completed = e.target.checked;
        saveToLoalStorage();
        //修改文本样式
        e.target.parentElement.children[1].classList.toggle('line');
        updateCount();
    }
}

//编辑函数
function editTask(e) {
    let li;
    if (e.target.nodeName == "BUTTON" && e.target.className == "editBtn") {

        //获取task的id
        const id = e.target.dataset.id;
        const task = tasks.find(task => task.id == id);
        console.log(id);
       
        showEditAlert(id, task.text);

    }
}

//更新
function updateCount() {
    // 底部统计数据的渲染
    // 生成统计数据
    let all = tasks.length
    let completed = tasks.filter(task => task.completed).length
    let uncompleted = all - completed

    // 修改对应元素的数据 -(1)-
    // const spans = document.querySelectorAll('.footer span');
    // spans[0].textContent = `全部 ${all}`
    // spans[1].textContent = `已完成 ${completed}`
    // spans[2].textContent = `未完成 ${uncompleted}`

    // 修改对应元素数据另外的方法 -(2)-
    document.querySelector('.footer span:nth-child(1)').textContent = `全部 ${all}`
    document.querySelector('.footer span:nth-child(2)').textContent = `已完成 ${completed}`
    document.querySelector('.footer span:nth-child(3)').textContent = `未完成 ${uncompleted}`
}

//把数据保存到本地的函数
function saveToLoalStorage(){
    localStorage.setItem('tasks',JSON.stringify(tasks));
}
//获取本地保存的函数
function getLoalStorage(){
    return JSON.parse(localStorage.getItem('tasks'));
}